| js+canvas绘制矩形的方法 | 您所在的位置：网站首页 › js canvas 绘制 › js+canvas绘制矩形的方法 |
js+canvas绘制矩形的方法
|
Posted in Javascript onJanuary 28, 2016
本文实例讲述了js+canvas绘制矩形的方法。分享给大家供大家参考，具体如下： 运行效果截图如下：
具体代码如下： canvas绘制矩形 function draw(id) { var canvas = document.getElementById("canvas"); if (canvas) { var context = canvas.getContext("2d"); context.fillStyle = "#DDDDDD"; context.fillRect(0, 0, 400, 400); context.strokeStyle = "black"; context.fillStyle = "gray"; context.lineWidth = 5; context.fillRect(0,0,200,300); context.strokeRect(0,0,200,200); } else { return; } } function drawBorder(id) { var canvas = document.getElementById("canvas2"); if (canvas) { var context = canvas.getContext("2d"); context.fillStyle = "red"; context.strokeStyle = "black"; context.lineWidth = 5; context.fillRect(0,0, 300, 200); context.strokeRect(0,0,300,200); } else { return; } } window.onload = function () { draw("canvas"); drawBorder("canvas2"); }希望本文所述对大家JavaScript程序设计有所帮助。 js+canvas绘制矩形的方法 - Author - m1870164声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。 Javascript 相关文章推荐 javascript同步Import,同步调用外部js的方法 Jul 08 Javascript JavaScript创建一个欢迎cookie弹出窗实现代码 Mar 15 Javascript jquery easyui滚动条部分设置介绍 Sep 12 Javascript 20分钟打造属于你的Bootstrap站点 Jul 27 Javascript 原生js实现图片放大缩小计时器效果 Jan 20 Javascript canvas滤镜效果实现代码 Feb 06 Javascript Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证) May 09 Javascript 详解性能更优越的小程序图片懒加载方式 Jul 18 Javascript 微信小程序实现动态获取元素宽高的方法分析 Dec 10 Javascript 关于在LayUI中使用AJAX提交巨坑记录 Oct 25 Javascript vue组件讲解(is属性的用法)模板标签替换操作 Sep 04 Javascript 解决vue-cli输入命令vue ui没效果的问题 Nov 17 Javascript |
【本文地址】
公司简介
联系我们